<template>
  <el-container>
    <el-aside width="200px">
      <el-scrollbar wrap-style="height:calc(100vh - 175px);">
        <el-tree
          ref="treeEl"
          style="max-width: 600px"
          :load="loadNode"
          :props="treeProps"
          node-key="id"
          :expand-on-click-node="false"
          lazy
          @node-click="clickTreeNode"
        >
          <template #default="{ node }">
            <template v-if="node.data.type == 'system'">
              <Icon icon="eos-icons:system-re-registered" color="#009ad6" hoverColor="#009ad6" />
              <span class="ml-1">{{ node.data.sysName }}</span>
            </template>
            <template v-else>
              <Icon
                icon="material-symbols:format-list-bulleted-rounded"
                color="#007d65"
                hoverColor="#007d65"
              />
              <span class="ml-1">{{ t(node.data.menuTitle) }}</span>
            </template>
          </template>
        </el-tree>
      </el-scrollbar>
    </el-aside>
    <WsmTable
      ref="table"
      v-model="queryFormType"
      load-url="/rbac-server/rbac/menu/page"
      :query-type="queryFormType"
      :change-load="true"
    >
      <template #title>{{ title }}</template>
      <template #query="{ data }">
        <el-form-item :label="t('rbac.menu.menuAction')">
          <el-radio-group v-model="data.menuAction.value">
            <el-radio value="">{{ t('rbac.menu.all') }}</el-radio>
            <el-radio value="0">{{ t('rbac.menu.disable') }}</el-radio>
            <el-radio value="1">{{ t('rbac.menu.enable') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #button="{ row }">
        <el-button
          type="primary"
          v-hasPermi="'add'"
          @click="addForm.show()"
          v-if="initData.sysId != 'root'"
          >{{ t('common.add') }}</el-button
        >
        <template v-if="row">
          <el-button @click="update(row.id)" v-hasPermi="'update'" type="primary">{{
            t('common.update')
          }}</el-button>
          <el-button v-hasPermi="'delete'" @click="del(row.id)" type="danger">{{
            t('common.delete')
          }}</el-button>
          <el-button v-hasPermi="'sort'" @click="sort(row.id, 1)" type="success">{{
            t('rbac.system.up')
          }}</el-button>
          <el-button v-hasPermi="'sort'" @click="sort(row.id, 0)" type="info">{{
            t('rbac.system.down')
          }}</el-button>
        </template>
      </template>
      <template #column>
        <el-table-column prop="menuAction" :label="t('rbac.menu.menuAction')" width="70">
          <template #default="scope">
            <template v-if="scope.row.menuAction">
              <el-tag effect="dark" type="success">{{ t('rbac.menu.enable') }}</el-tag>
            </template>
            <template v-else>
              <el-tag effect="dark" type="danger">{{ t('rbac.menu.disable') }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="menuName" :label="t('rbac.menu.menuName')" width="200" />
        <el-table-column prop="menuTitle" :label="t('rbac.menu.menuTitle')" width="200">
          <template #default="scope">
            <template v-if="scope.row.menuIcon">
              <Icon :icon="scope.row.menuIcon" />
            </template>
            {{ t(scope.row.menuTitle) }}
          </template>
        </el-table-column>
        <el-table-column prop="menuPath" :label="t('rbac.menu.menuPath')" width="240" />
        <el-table-column prop="menuComponent" :label="t('rbac.menu.menuComponent')" />
      </template>
    </WsmTable>
  </el-container>

  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/rbac-server/rbac/menu/add"
    label-width="120px"
    height="500px"
    :init-data="initData"
    :title="t('rbac.menu.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="menuName" :label="t('rbac.menu.menuName')">
            <el-input v-model="form.menuName" :placeholder="t('rbac.menu.menuName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuTitle" :label="t('rbac.menu.menuTitle')">
            <el-input v-model="form.menuTitle" :placeholder="t('rbac.menu.menuTitle')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="menuPath" :label="t('rbac.menu.menuPath')">
            <el-input v-model="form.menuPath" :placeholder="t('rbac.menu.menuPath')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="menuComponent" :label="t('rbac.menu.menuComponent')">
            <el-input v-model="form.menuComponent" :placeholder="t('rbac.menu.menuComponent')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="menuRedirect" :label="t('rbac.menu.menuRedirect')">
            <el-input v-model="form.menuRedirect" :placeholder="t('rbac.menu.menuRedirect')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="activeMenu" :label="t('rbac.menu.activeMenu')">
            <el-input v-model="form.activeMenu" :placeholder="t('rbac.menu.activeMenu')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuIcon" :label="t('rbac.menu.menuIcon')">
            <el-input v-model="form.menuIcon" :placeholder="t('rbac.menu.menuIcon')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="alwaysShow" :label="t('rbac.menu.alwaysShow')">
            <el-radio-group v-model="form.alwaysShow">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuHidden" :label="t('rbac.menu.menuHidden')">
            <el-radio-group v-model="form.menuHidden">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="noCache" :label="t('rbac.menu.noCache')">
            <el-radio-group v-model="form.noCache">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="breadcrumb" :label="t('rbac.menu.breadcrumb')">
            <el-radio-group v-model="form.breadcrumb">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="affix" :label="t('rbac.menu.affix')">
            <el-radio-group v-model="form.affix">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="noTagsView" :label="t('rbac.menu.noTagsView')">
            <el-radio-group v-model="form.noTagsView">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="canTo" :label="t('rbac.menu.canTo')">
            <el-radio-group v-model="form.canTo">
              <el-radio value="0">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuAction" :label="t('rbac.menu.menuAction')">
            <el-radio-group v-model="form.menuAction">
              <el-radio value="0">{{ t('rbac.menu.disable') }}</el-radio>
              <el-radio value="1">{{ t('rbac.menu.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/rbac-server/rbac/menu/get"
    submit-url="/rbac-server/rbac/menu/update"
    height="500px"
    label-width="120px"
    :title="t('rbac.menu.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="menuName" :label="t('rbac.menu.menuName')">
            <el-input v-model="form.menuName" :placeholder="t('rbac.menu.menuName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuTitle" :label="t('rbac.menu.menuTitle')">
            <el-input v-model="form.menuTitle" :placeholder="t('rbac.menu.menuTitle')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="menuPath" :label="t('rbac.menu.menuPath')">
            <el-input v-model="form.menuPath" :placeholder="t('rbac.menu.menuPath')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="menuComponent" :label="t('rbac.menu.menuComponent')">
            <el-input v-model="form.menuComponent" :placeholder="t('rbac.menu.menuComponent')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="menuRedirect" :label="t('rbac.menu.menuRedirect')">
            <el-input v-model="form.menuRedirect" :placeholder="t('rbac.menu.menuRedirect')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="activeMenu" :label="t('rbac.menu.activeMenu')">
            <el-input v-model="form.activeMenu" :placeholder="t('rbac.menu.activeMenu')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuIcon" :label="t('rbac.menu.menuIcon')">
            <el-input v-model="form.menuIcon" :placeholder="t('rbac.menu.menuIcon')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="alwaysShow" :label="t('rbac.menu.alwaysShow')">
            <el-radio-group v-model="form.alwaysShow">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuHidden" :label="t('rbac.menu.menuHidden')">
            <el-radio-group v-model="form.menuHidden">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="noCache" :label="t('rbac.menu.noCache')">
            <el-radio-group v-model="form.noCache">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="breadcrumb" :label="t('rbac.menu.breadcrumb')">
            <el-radio-group v-model="form.breadcrumb">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="affix" :label="t('rbac.menu.affix')">
            <el-radio-group v-model="form.affix">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="noTagsView" :label="t('rbac.menu.noTagsView')">
            <el-radio-group v-model="form.noTagsView">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="canTo" :label="t('rbac.menu.canTo')">
            <el-radio-group v-model="form.canTo">
              <el-radio :value="false">{{ t('rbac.menu.no') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.yes') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuAction" :label="t('rbac.menu.menuAction')">
            <el-radio-group v-model="form.menuAction">
              <el-radio :value="false">{{ t('rbac.menu.disable') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.menu.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { reactive, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { sortApi, delApi, childsApi } from '@/api/rbac/menu'
import { ElMessageBox, ElTree } from 'element-plus'
import { listTreeApi } from '@/api/rbac/system'
import type Node from 'element-plus/es/components/tree/src/model/node'

const { t } = useI18n()

//列表标题
const title = ref(t('rbac.menu.treeRoot'))

//新增表单对象
const addForm = ref()
const initData = ref({
  sysId: 'root',
  parentId: 'root',
  menuComponent: '#',
  alwaysShow: '0',
  menuHidden: '0',
  noCache: '0',
  breadcrumb: '0',
  affix: '0',
  noTagsView: '0',
  canTo: '0',
  menuAction: '1'
})
const addData: FormDataType = reactive({
  sysId: 'root',
  parentId: 'root',
  menuName: '',
  menuPath: '',
  menuComponent: '#',
  menuRedirect: '',
  menuIcon: '',
  menuTitle: '',
  alwaysShow: '0',
  menuHidden: '0',
  noCache: '0',
  breadcrumb: '0',
  affix: '0',
  noTagsView: '0',
  canTo: '0',
  activeMenu: '',
  menuAction: '1'
})

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  parentId: '',
  menuName: '',
  menuPath: '',
  menuComponent: '#',
  menuRedirect: '',
  menuIcon: '',
  menuTitle: '',
  alwaysShow: false,
  menuHidden: false,
  noCache: false,
  breadcrumb: false,
  affix: false,
  noTagsView: false,
  canTo: false,
  activeMenu: '',
  menuAction: false
}

//表格对象
const table = ref()

const initParams = (data) => {
  if (data.type == 'system') {
    initData.value.sysId = data.id
    initData.value.parentId = 'root'
    title.value = '系统:' + data.sysName
    queryFormType.sysId.value = data.id
    queryFormType.parentId.value = 'root'
  } else {
    title.value = '父菜单：' + t(data.menuTitle)
    initData.value.sysId = data.sysId
    initData.value.parentId = data.id
    queryFormType.sysId.value = data.sysId
    queryFormType.parentId.value = data.id
  }
}

//加载树代码
const loadNode = async (node: Node, resolve: (data: []) => void) => {
  if (node.level == 0) {
    const rs = await listTreeApi()
    if (rs.success) {
      return resolve(rs.data)
    }
  } else {
    let sysId = node.data.sysId
    let parentId = node.data.id
    if (node.data.type == 'system') {
      sysId = node.data.id
      parentId = 'root'
    }
    const rs = await childsApi(sysId, parentId)
    if (rs.success) {
      return resolve(rs.data)
    }
  }
}

const treeEl = ref<InstanceType<typeof ElTree>>()

const parentNode = ref()

//树配置项
const treeProps = {
  parentId: 'parentId',
  label: 'id',
  isLeaf: 'isLeaf'
}
//更新树
const updateKeyChildren = async () => {
  if (parentNode.value) {
    let sysId = parentNode.value.sysId
    let parentId = 'root'
    let updateKey = ''
    if (parentNode.value.type == 'system') {
      sysId = parentNode.value.id
      updateKey = sysId
    } else {
      if (parentNode.value.isLeaf) {
        if (parentNode.value.parentId == 'root') {
          updateKey = parentNode.value.sysId
        } else {
          updateKey = parentNode.value.parentId
          parentId = parentNode.value.parentId
        }
      } else {
        parentId = parentNode.value.id
        updateKey = parentId
      }
    }
    const rs = await childsApi(sysId, parentId)
    if (rs.success) {
      treeEl.value?.updateKeyChildren(updateKey, rs.data)
    }
  }
}
//树的点击事件
const clickTreeNode = (data) => {
  parentNode.value = data
  initParams(data)
  table.value.load(1)
}

const queryFormType: QueryFormType = {
  parentId: {
    value: 'root',
    clear: false
  },
  sysId: {
    value: 'root',
    clear: false
  },
  menuAction: {
    value: '',
    queryType: QueryType.EQ
  }
}

const update = (id: string) => {
  updateForm.value.show({ id })
}
const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi(id)
    if (rs.success) {
      table.value.load(1)
      updateKeyChildren()
    }
  })
}
const sort = async (id: string, type: number) => {
  const rs = await sortApi({ id, type })
  if (rs.success) {
    updateKeyChildren()
    table.value.load()
  }
}

const flushed = () => {
  updateKeyChildren()
  table.value.load(1)
}
</script>

<style scoped>
.scrollbar {
}
</style>
